<template>
  <div>
    <self-breadcrumb :bread-arr = "['订单管理','订单列表']"></self-breadcrumb>
    <el-card class = "box-card">
      <div slot = "header" class = "clearfix">
        <el-input @clear = "inputClear" clearable v-model = "orderQuery.query" @keydown.enter.native = "orderQueryClick"
                  placeholder = "名字搜索">
          <el-button @click = "orderQueryClick" slot = "append" icon = "el-icon-search" type = "primary"></el-button>
        </el-input>
      </div>
      <el-table
          border
          :data = "orderList"
          style = "width: 100%">
        <el-table-column
            :resizable = "false"
            type = "index"
            label = "#">
        </el-table-column>
        <el-table-column
            :resizable = "false"
            prop = "order_number"
            min-width = "200px"
            label = "订单编号">
        </el-table-column>
        <el-table-column
            :resizable = "false"
            prop = "order_price"
            label = "订单价格">
        </el-table-column>
        <el-table-column
            :resizable = "false"
            label = "是否付款">
          <template slot-scope = "scope">
            <el-tag v-if = "scope.row.order_pay-0===1" type = "success">已付款</el-tag>
            <el-tag v-else type = "danger">未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            :resizable = "false"
            prop = "is_send"
            label = "是否发货">
        </el-table-column>
        <el-table-column
            :resizable = "false"
            prop = "update_time"
            label = "下单时间">
          <template slot-scope = "scope">
            {{scope.row.update_time|dataFormat}}
          </template>
        </el-table-column>
        <el-table-column
            :resizable = "false"
            width = "250"
            label = "操作">
          <template slot-scope = "scope">
            <el-button @click = "showEdit" size = "small" icon = "el-icon-edit" type = "primary">修改地址</el-button>
            <el-button @click = "showProgress" size = "small" icon = "el-icon-location" type = "success">
              查看物流
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
          background
          :page-sizes = "[2,5,10,20,50]"
          :page-size.sync = "orderQuery.pagesize"
          @size-change = "handleSizeChange"
          @current-change = "handleCurrentChange"
          :current-page = "orderQuery.pagenum"
          layout = "sizes, prev, pager, next, jumper, ->, total"
          :total = "total">
      </el-pagination>
      <!-- 修改地址的对话框 -->
      <el-dialog
          @close = "editFormClose"
          title = "修改地址"
          :visible.sync = "editVisible"
          width = "50%">
        <el-form ref = "editFormRef" :rules = "editFormRules" :model = "editForm"
                 label-width = "120px">
          <el-form-item label = "省市区/县" prop = "address1">
            <el-cascader
                :options = "citydata"
                :props = "{expandTrigger:'hover',label:'label',value:'value'}"
                v-model = "editForm.address1"
                @change = "handleChange"></el-cascader>
          </el-form-item>
          <el-form-item label = "详细地址" prop = "address2">
            <el-input v-model = "editForm.address2"></el-input>
          </el-form-item>
        </el-form>
        <span slot = "footer" class = "dialog-footer">
          <el-button @click = "editVisible = false">取 消</el-button>
          <el-button type = "primary" @click = "editVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 展示物流进度的对话框 -->
      <el-dialog
          title = "物流进度"
          :visible.sync = "progressVisible"
          width = "50%">
        <div class = "block">
          <el-timeline>
            <el-timeline-item
                v-for = "(activity, index) in progressMsg"
                :timestamp = "activity.time"
                :key = "index">
              {{activity.context}}
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
import SelfBreadcrumb from '../SelfBreadcrumb'
// 该js文件有所有的省市区/县
import citydata from './citydata'

export default {
  name: 'Orders',
  components: {
    SelfBreadcrumb
  },
  created () {
    this.getOrderList()
  },
  data () {
    return {
      orderList: [],
      orderQuery: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      total: 0,
      editVisible: false,
      editForm: {
        address1: [],
        address2: ''
      },
      editFormRules: {
        address1: [{ required: true, message: '请选择省市区/县', trigger: 'blur' }],
        address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
      },
      citydata: citydata,
      progressVisible: false,
      progressMsg: []
    }
  },
  methods: {
    async getOrderList () {
      const { data: res } = await this.$http.get('orders', { params: this.orderQuery })
      if (this.process(res)) {
        this.orderList = res.data.goods
        this.total = res.data.total
      }
    },
    process (res) {
      const status = res.meta.status
      const msg = res.meta.msg
      if (status === 200 || status === 201 || status === 204) {
        this.$message.success(msg)
        return 1
      } else {
        this.$message.error(msg)
        return 0
      }
    },
    handleSizeChange (val) {
      this.orderQuery.pagesize = val
      console.log(val)
      this.getOrderList()
    },
    handleCurrentChange (val) {
      this.orderQuery.pagenum = val
      console.log(val)
      this.getOrderList()
    },
    orderQueryClick () {
      console.log(this.orderQuery)
      this.getOrderList()
    },
    showEdit () {
      this.editVisible = true
    },
    handleChange (val) {
    },
    editFormClose () {
      this.$refs.editFormRef.resetFields()
    },
    async showProgress () {
      // 这个接口的快递完全是随机生成的 所以不要疑惑
      const { data: res } = await this.$http.get('/kuaidi/804909574412544580')
      if (res.meta.status === 200) {
        this.$message.success(res.meta.message)
        this.progressMsg = res.data
      }
      this.progressVisible = true
    },
    inputClear () {
      this.getOrderList()
    }
  }
}
</script>

<style scoped>
  .el-card {
    margin-top: 20px;
  }

  .clearfix .el-input {
    width: 40%
  }

  .el-table {
    margin-bottom: 20px;
  }

  .el-cascader {
    width: 100%;
  }
</style>
